<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template>
  <div class="chat">
    <div class="chat-conversation">
      <conversation-list ref="conversationList" base-size="10px" />
    </div>
    <div class="chat-message">
      <div class="chat-massage-list">
        <message-list ref="messageList" base-size="10px"></message-list>
      </div>
      <div class="chat-massage-editor">
        <message-editor ref="messageEditor" base-size="10px"></message-editor>
      </div>
    </div>
  </div>
</template>

<style scoped>
.chat {
  width: 100%;
  height: 100%;
}

.chat-conversation {
  float: left;
  width: 30vw;
  height: 100%;
}

.chat-message {
  float: left;
  width: 70vw;
  height: 100%;
}

.chat-massage-list {
  height: calc(100% - 220px);
}

.chat-massage-editor {
  height: 220px;
}
</style>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Chat",
  mounted() {
    // 获取到标签元素
    const conversationList: any = this.$refs.conversationList;
    // 获取到标签元素
    const messageList: any = this.$refs.messageList;

    /**
     * 添加点击会话监听
     */
    conversationList.addEventListener(
      "tapConversation",
      this.handleTapConversation
    );

    /**
     * 添加删除会话监听
     */
    conversationList.addEventListener(
      "deleteConversation",
      this.handleDeleteConversation
    );

    /**
     * 添加点击消息监听
     * 注意：仅有点击图片消息和文件消息会触发监听
     */
    messageList.addEventListener("tapMessage", this.handleTapMessage);
  },
  methods: {
    handleTapConversation() {
      console.info("handleTapConversation");
    },
    handleDeleteConversation() {
      console.info("handleDeleteConversation");
    },
    handleTapMessage(e: any) {
      const data = e.detail;
      // 处理点击查看大图或文件消息下载等功能
      console.log("点击消息触发监听:", data);
    },
  },
});
</script>
